import React, { useCallback, useState } from 'react'
import { View, Image } from '@tarojs/components'
import Draggable from 'react-draggable'
import { checkIsAndroid, getPathname } from '@UTILS/common'
import Images from '@ASSET/Images'
import { CLICK_HOME_BUTTON, TAB_PAGE } from '@CONSTANTS/app'
import Scenes from '@NAVIGATION/scenes'
import { useAcPermission } from '@HOOKS/useSpringRainLogin'
import Navigate from '@NAVIGATION/navigateManager'
import './HomeFixedButton.scss'

export default function HomeFixedButtonH5() {
  const [isDrag, setIsDrag] = useState(false)
  const { isSpringRain } = useAcPermission()
  const [render, setRender] = useState(false)
  const handleDrag = useCallback(() => {
    setIsDrag(true)
  }, [])
  const onClick = useCallback(() => {
    if (isSpringRain) {
      Navigate.switchTab('homePage')
      setRender(v => !v)
    } else {
      const homeUrl = `${Scenes.homePage}${CLICK_HOME_BUTTON}${global.IS_TAKEDA_H5 ? '&AcquireChannel=takeda' : ''}`
      window.location.href = homeUrl
    }
  }, [isSpringRain])
  const handleStop = useCallback(() => {
    if (!isDrag) {
      onClick()
    }
    setIsDrag(false)
  }, [isDrag, onClick])
  const pathname = getPathname()
  if (TAB_PAGE.includes(pathname)) {
    return null
  }
  if (checkIsAndroid()) {
    return (
      <View className={`home-fixed-btn ${isDrag ? 'dragging' : ''}`} onClick={onClick}>
        <Image src={Images.home.home_btn} className="home-fixed-img" />
      </View>
    )
  }
  return (
    <Draggable
      bounds={{
        top: -350, bottom: 40, left: 0, right: 0
      }}
      onDrag={handleDrag}
      onStop={handleStop}
    >
      <View className={`home-fixed-btn ${isDrag ? 'dragging' : ''}`}>
        <Image src={Images.home.home_btn} className="home-fixed-img" />
      </View>
    </Draggable>
  )
}
